<template>
  <view class="container">
    <!-- 订单状态栏 -->
    <view class="status-bar">
      <view class="status-icon">
        <view class="custom-icon" :style="{ color: statusColor }">
          <text class="iconfont" :class="'icon-' + statusIconClass"></text>
        </view>
      </view>
      <view class="status-info">
        <view class="status-text">{{ statusText }}</view>
        <view class="status-desc">{{ statusDesc }}</view>
      </view>
    </view>

    <!-- 订单进度条 -->
    <view class="progress-section">
      <view class="section-title">订单进度</view>
      <view class="progress-timeline">
        <view class="timeline-item" v-for="(item, index) in orderTimeline" :key="index" :class="{ active: item.active }">
          <view class="timeline-dot"></view>
          <view class="timeline-content">
            <view class="timeline-title">{{ item.title }}</view>
            <view class="timeline-time">{{ item.time }}</view>
            <view class="timeline-desc" v-if="item.desc">{{ item.desc }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="order-info-section">
      <view class="section-title">订单信息</view>
      <view class="info-item">
        <text class="info-label">订单编号</text>
        <view class="info-value">
          <text>{{ orderInfo.orderNo }}</text>
          <view class="copy-btn" @tap="copyOrderNo">复制</view>
        </view>
      </view>
      <view class="info-item">
        <text class="info-label">下单时间</text>
        <text class="info-value">{{ orderInfo.createTime }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">支付方式</text>
        <text class="info-value">{{ orderInfo.paymentMethod }}</text>
      </view>
      <view class="info-item" v-if="orderInfo.remark">
        <text class="info-label">备注</text>
        <text class="info-value">{{ orderInfo.remark }}</text>
      </view>
    </view>

    <!-- 配送信息 -->
    <view class="delivery-section" v-if="orderInfo.deliveryType === 'delivery'">
      <view class="section-title">配送信息</view>
      <view class="address-info">
        <view class="address-user">
          <text class="name">{{ orderInfo.address.name }}</text>
          <text class="phone">{{ orderInfo.address.phone }}</text>
        </view>
        <view class="address-detail">{{ orderInfo.address.fullAddress }}</view>
      </view>
      <view class="info-item" v-if="orderInfo.deliveryTime">
        <text class="info-label">配送时间</text>
        <text class="info-value">{{ orderInfo.deliveryTime }}</text>
      </view>
    </view>

    <!-- 自提信息 -->
    <view class="pickup-section" v-if="orderInfo.deliveryType === 'pickup'">
      <view class="section-title">自提信息</view>
      <view class="info-item">
        <text class="info-label">自提时间</text>
        <text class="info-value">{{ orderInfo.pickupTime }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">自提地点</text>
        <text class="info-value">{{ orderInfo.pickupLocation }}</text>
      </view>
    </view>

    <!-- 商品列表 -->
    <view class="product-section">
      <view class="section-title">商品信息</view>
      <view class="product-item" v-for="(item, index) in orderInfo.products" :key="index">
        <image :src="item.image" class="product-img" mode="aspectFill"></image>
        <view class="product-info">
          <view class="product-name">{{ item.name }}</view>
          <view class="product-specs" v-if="item.specs">{{ item.specs }}</view>
          <view class="product-price-num">
            <view class="product-price">¥{{ (item.price / 100).toFixed(2) }}</view>
            <view class="product-num">x{{ item.number }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 订单金额 -->
    <view class="amount-section">
      <view class="section-title">订单金额</view>
      <view class="amount-item">
        <text>商品金额</text>
        <text>¥{{ (orderInfo.productAmount / 100).toFixed(2) }}</text>
      </view>
      <view class="amount-item" v-if="orderInfo.freight > 0">
        <text>配送费</text>
        <text>¥{{ (orderInfo.freight / 100).toFixed(2) }}</text>
      </view>
      <view class="amount-item" v-if="orderInfo.couponDiscount > 0">
        <text>优惠券</text>
        <text class="discount">-¥{{ (orderInfo.couponDiscount / 100).toFixed(2) }}</text>
      </view>
      <view class="amount-item total">
        <text>实付金额</text>
        <text class="total-price">¥{{ (orderInfo.actualAmount / 100).toFixed(2) }}</text>
      </view>
    </view>

    <!-- 底部占位，防止内容被底部操作栏遮挡 -->
    <view class="bottom-placeholder"></view>

    <!-- 底部操作栏 -->
    <view class="footer-actions">
      <view class="action-btns">
        <button class="btn btn-secondary" v-if="orderInfo.status === 'pending'" @tap="cancelOrder">取消订单</button>
        <button class="btn btn-secondary" v-if="orderInfo.status === 'completed'" @tap="applyAfterSale">申请售后</button>
        <button class="btn btn-secondary" v-if="orderInfo.status === 'completed'" @tap="buyAgain">再次购买</button>
        <button class="btn btn-primary" v-if="orderInfo.status === 'pending'" @tap="payOrder">立即支付</button>
        <button class="btn btn-primary" v-if="orderInfo.status === 'shipping'" @tap="confirmReceipt">确认收货</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderId: null,
      orderInfo: {
        orderNo: 'XM202403120001',
        status: 'shipping', // pending, paid, shipping, completed, cancelled
        createTime: '2024-03-12 14:30:25',
        paymentMethod: '微信支付',
        remark: '请尽快发货，谢谢',
        deliveryType: 'delivery', // delivery, pickup
        address: {
          name: '张三',
          phone: '138****1234',
          fullAddress: '广东省广州市天河区天河路385号太古汇商场4楼'
        },
        deliveryTime: '2024-03-13 下午',
        products: [
          {
            id: 1,
            image: 'https://img01.yzcdn.cn/vant/ipad.jpeg',
            name: '喜茶 多肉葡萄',
            specs: '中杯，常规冰，常规糖',
            price: 2900,
            number: 1
          },
          {
            id: 2,
            image: 'https://img01.yzcdn.cn/vant/cat.jpeg',
            name: '喜茶 芝芝莓莓',
            specs: '大杯，少冰，少糖',
            price: 3200,
            number: 2
          }
        ],
        productAmount: 9300,
        freight: 600,
        couponDiscount: 1000,
        actualAmount: 8900
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.orderId = options.id
      // 根据订单ID获取订单详情
      this.getOrderDetail()
    }
  },
  computed: {
    statusIconClass() {
      const iconMap = {
        pending: 'clock',
        paid: 'check-circle',
        shipping: 'truck',
        completed: 'check-square',
        cancelled: 'x-circle'
      }
      return iconMap[this.orderInfo.status] || 'clock'
    },
    statusColor() {
      const colorMap = {
        pending: '#FF9800',
        paid: '#2196F3',
        shipping: '#3F51B5',
        completed: '#4CAF50',
        cancelled: '#F44336'
      }
      return colorMap[this.orderInfo.status] || '#FF9800'
    },
    statusText() {
      const textMap = {
        pending: '待付款',
        paid: '已付款',
        shipping: '配送中',
        completed: '已完成',
        cancelled: '已取消'
      }
      return textMap[this.orderInfo.status] || '待付款'
    },
    statusDesc() {
      const descMap = {
        pending: '请在30分钟内完成支付',
        paid: '商家正在处理您的订单',
        shipping: '商品正在配送中，请耐心等待',
        completed: '订单已完成，感谢您的购买',
        cancelled: '订单已取消'
      }
      return descMap[this.orderInfo.status] || ''
    },
    orderTimeline() {
      const status = this.orderInfo.status
      const createTime = this.orderInfo.createTime
      
      // 根据订单状态生成时间线
      const timeline = [
        {
          title: '下单成功',
          time: createTime,
          active: true
        },
        {
          title: '支付成功',
          time: status === 'pending' ? '' : '2024-03-12 14:35:10',
          active: ['paid', 'shipping', 'completed'].includes(status)
        },
        {
          title: '商家接单',
          time: ['shipping', 'completed'].includes(status) ? '2024-03-12 14:40:22' : '',
          active: ['shipping', 'completed'].includes(status)
        },
        {
          title: status === 'pickup' ? '等待自提' : '配送中',
          time: ['shipping', 'completed'].includes(status) ? '2024-03-12 15:10:05' : '',
          desc: status === 'shipping' ? '配送员: 李师傅 (138****5678)' : '',
          active: ['shipping', 'completed'].includes(status)
        },
        {
          title: '订单完成',
          time: status === 'completed' ? '2024-03-12 16:05:18' : '',
          active: status === 'completed'
        }
      ]
      
      return timeline
    }
  },
  methods: {
    getOrderDetail() {
      // 模拟获取订单详情的API调用
      console.log('获取订单详情，ID:', this.orderId)
      // 实际项目中应该调用API获取订单详情
      // this.orderInfo = ...
    },
    copyOrderNo() {
      uni.setClipboardData({
        data: this.orderInfo.orderNo,
        success: () => {
          uni.showToast({
            title: '订单号已复制',
            icon: 'none'
          })
        }
      })
    },
    // 取消订单
    cancelOrder() {
      uni.showModal({
        title: '提示',
        content: '确定要取消该订单吗？',
        success: (res) => {
          if (res.confirm) {
            // 调用取消订单API
            console.log('取消订单', this.orderId)
            uni.showToast({
              title: '订单已取消',
              icon: 'success'
            })
            // 返回上一页
            setTimeout(() => {
              uni.navigateBack()
            }, 1500)
          }
        }
      })
    },
    // 支付订单
    payOrder() {
      uni.navigateTo({
        url: `/pages/pay/index?orderId=${this.orderId}`
      })
    },
    // 确认收货
    confirmReceipt() {
      uni.showModal({
        title: '提示',
        content: '确认已收到商品吗？',
        success: (res) => {
          if (res.confirm) {
            // 调用确认收货API
            console.log('确认收货', this.orderId)
            uni.showToast({
              title: '已确认收货',
              icon: 'success'
            })
            // 刷新订单状态
            this.orderInfo.status = 'completed'
          }
        }
      })
    },
    // 申请售后
    applyAfterSale() {
      uni.showToast({
        title: '申请售后功能开发中',
        icon: 'none'
      })
    },
    // 再次购买
    buyAgain() {
      // 将商品加入购物车
      uni.showToast({
        title: '已加入购物车',
        icon: 'success'
      })
      // 跳转到首页
      setTimeout(() => {
        uni.switchTab({
          url: '/pages/category/index'
        })
      }, 1500)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/common/theme.scss';

.container {
  min-height: 100vh;
  padding: 20rpx;
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
  background: $bg-main;
}

.status-bar {
  display: flex;
  align-items: center;
  padding: 40rpx 30rpx;
  background: $bg-white;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba($primary-pink, 0.05);
  
  .status-icon {
    margin-right: 30rpx;
    
    .custom-icon {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 60rpx;
    }
  }
  
  .status-info {
    flex: 1;
    
    .status-text {
      font-size: 36rpx;
      font-weight: bold;
      color: $primary-dark-pink;
      margin-bottom: 10rpx;
    }
    
    .status-desc {
      font-size: 26rpx;
      color: $primary-light-pink;
    }
  }
}

.progress-section,
.order-info-section,
.delivery-section,
.pickup-section,
.product-section,
.amount-section {
  background: $bg-white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba($primary-pink, 0.05);
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: $primary-dark-pink;
  margin-bottom: 30rpx;
  position: relative;
  padding-left: 20rpx;
  
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6rpx;
    height: 30rpx;
    background: $primary-pink;
    border-radius: 3rpx;
  }
}

.progress-timeline {
  .timeline-item {
    position: relative;
    padding-left: 30rpx;
    padding-bottom: 40rpx;
    
    &:last-child {
      padding-bottom: 0;
    }
    
    &::before {
      content: '';
      position: absolute;
      left: 10rpx;
      top: 30rpx;
      bottom: 0;
      width: 2rpx;
      background: rgba($primary-light-pink, 0.3);
    }
    
    &:last-child::before {
      display: none;
    }
    
    .timeline-dot {
      position: absolute;
      left: 0;
      top: 16rpx;
      width: 20rpx;
      height: 20rpx;
      border-radius: 50%;
      background: rgba($primary-light-pink, 0.3);
      border: 2rpx solid rgba($primary-light-pink, 0.5);
    }
    
    &.active {
      .timeline-dot {
        background: $primary-pink;
        border-color: $primary-pink;
      }
      
      .timeline-title {
        color: $primary-dark-pink;
        font-weight: bold;
      }
      
      .timeline-time {
        color: $primary-pink;
      }
    }
    
    .timeline-content {
      .timeline-title {
        font-size: 28rpx;
        color: $primary-light-pink;
        margin-bottom: 6rpx;
      }
      
      .timeline-time {
        font-size: 24rpx;
        color: $primary-light-pink;
        margin-bottom: 6rpx;
      }
      
      .timeline-desc {
        font-size: 24rpx;
        color: $primary-light-pink;
        background: rgba($primary-pink, 0.05);
        padding: 10rpx 20rpx;
        border-radius: 8rpx;
        margin-top: 10rpx;
      }
    }
  }
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  .info-label {
    font-size: 28rpx;
    color: $primary-light-pink;
  }
  
  .info-value {
    font-size: 28rpx;
    color: $primary-dark-pink;
    display: flex;
    align-items: center;
    
    .copy-btn {
      font-size: 24rpx;
      color: $primary-pink;
      margin-left: 20rpx;
      padding: 4rpx 16rpx;
      border: 1rpx solid $primary-pink;
      border-radius: 20rpx;
    }
  }
}

.address-info {
  background: rgba($primary-pink, 0.03);
  padding: 20rpx;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  
  .address-user {
    display: flex;
    margin-bottom: 10rpx;
    
    .name {
      font-size: 30rpx;
      font-weight: bold;
      color: $primary-dark-pink;
      margin-right: 20rpx;
    }
    
    .phone {
      font-size: 28rpx;
      color: $primary-light-pink;
    }
  }
  
  .address-detail {
    font-size: 28rpx;
    color: $primary-dark-pink;
    line-height: 1.5;
  }
}

.product-item {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1rpx solid rgba($primary-light-pink, 0.1);
  
  &:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  
  .product-img {
    width: 160rpx;
    height: 160rpx;
    border-radius: 12rpx;
    background: #f5f5f5;
  }
  
  .product-info {
    flex: 1;
    margin-left: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    .product-name {
      font-size: 28rpx;
      color: $primary-dark-pink;
      font-weight: bold;
      margin-bottom: 6rpx;
    }
    
    .product-specs {
      font-size: 24rpx;
      color: $primary-light-pink;
      margin-bottom: 20rpx;
    }
    
    .product-price-num {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .product-price {
        font-size: 28rpx;
        color: $primary-dark-pink;
        font-weight: bold;
      }
      
      .product-num {
        font-size: 26rpx;
        color: $primary-light-pink;
      }
    }
  }
}

.amount-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16rpx;
  font-size: 28rpx;
  color: $primary-light-pink;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  .discount {
    color: #FF5252;
  }
  
  &.total {
    margin-top: 20rpx;
    padding-top: 20rpx;
    border-top: 1rpx solid rgba($primary-light-pink, 0.1);
    font-weight: bold;
    color: $primary-dark-pink;
    
    .total-price {
      font-size: 32rpx;
      color: #FF5252;
    }
  }
}

/* 底部占位 */
.bottom-placeholder {
  height: calc(120rpx + env(safe-area-inset-bottom));
}

.footer-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: $bg-white;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  box-shadow: 0 -4rpx 12rpx rgba($primary-pink, 0.05);
  z-index: 100;
  
  .action-btns {
    display: flex;
    justify-content: flex-end;
    
    .btn {
      min-width: 180rpx;
      height: 70rpx;
      line-height: 70rpx;
      text-align: center;
      border-radius: 35rpx;
      font-size: 28rpx;
      margin-left: 20rpx;
      
      &.btn-secondary {
        background: $bg-white;
        color: $primary-dark-pink;
        border: 1rpx solid rgba($primary-light-pink, 0.3);
      }
      
      &.btn-primary {
        background: $gradient-button;
        color: $bg-white;
      }
    }
  }
}
</style>
